<template>
    <div class="app-container">
        <div class="pageTitle">
            <div class="pageTitleSub">
                <el-form ref="queryForm" :model="queryParams" label-width="120px" size="small">
                    <el-row :gutter="5">
                        <el-col :span="6">
                            <el-form-item label="车牌号" prop="plateNo">
                                <el-input v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="上秤开始时间" prop="startGmtEntry">
                                <el-date-picker
                                    v-model="queryParams.startGmtEntry"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束时间" prop="endGmtEntry">
                                <el-date-picker
                                    v-model="queryParams.endGmtEntry"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="pageBtn">
                <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<!--                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
            </div>
        </div>
        <page-main>
            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                      header-cell-class-name="table-header" style="width: 100%;" border
                      :row-class-name="tableRowClassName">
                <el-table-column
                    prop="plateNo"
                    label="车牌号码"
                    align="center" width="140"
                    show-overflow-tooltip/>
                <el-table-column label="上秤时间" width="180" prop="gmtWeighOn">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtWeighOn).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
<!--                <el-table-column label="下秤时间" width="180" prop="gmtWeighBelow">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{ moment(scope.row.gmtWeighBelow).format('YYYY-MM-DD HH:mm:ss') }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                    prop="vehicleType"
                    label="车辆类型"
                    align="center" width="120">
                    <template slot-scope="scope">
                        {{
                        scope.row.vehicleType == 0
                        ? "转运车辆"
                        : scope.row.vehicleType == 1
                        ? "超限车辆"
                        : ""
                        }}
                    </template
                    >
                </el-table-column>
                <el-table-column
                    prop="limitWeight"
                    label="车辆限重(吨)"
                    align="right" width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="entranceWeight"
                    label="初检车货总重(吨)"
                    align="right" width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="overWeight"
                    label="超重(吨)"
                    align="right" width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="currentOverWeight"
                    label="当前超载重量(吨)"
                    align="right" width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="currentWeight"
                    label="当前载货重量"
                    align="right" width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop="currentDetectionTimes"
                    label="当前检测次数"
                    align="right" width="120"
                    show-overflow-tooltip/>
                <el-table-column
                    prop=""
                    label="操作"
                    fixed="right" align="center" width="300">
                    <template slot-scope="scope">
                        <!--                        <el-button size="small" type="text" icon="el-icon-coordinate" @click="handleViews(scope.$index)">审核</el-button>-->
                        <el-button size="small" type="text" icon="el-icon-view" @click="showZfws(scope.$index)">查看明细
<!--                        <el-button size="small" type="text" icon="el-icon-view" @click="showZfws(scope.row)">查看明细-->
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="Pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page="queryParams.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount"
                    @current-change="handleCurrentChange"/>
            </div>
        </page-main>

        <weight-information
            ref="weight-information"
            :total="totalSize"
            :table-size="tableSize"
            :current-page="queryParams.CurrentPage"
            :init-detail-data="detailData"
            :init-detail-data1="detailData1"
            :indexs="index"
            :wja="wja"
            :step="step1"
            :wja-type="wjaType"
            @handleViews="showZfws"
            @getList="handleCurrentChange"/>


    </div>
</template>
<script>

    import {GetVehicleDetect, GetVehicleDetectDetail} from '@/api/parkUnloadApi';
    import moment from 'moment';
    import WeightInformation from '@/modules/information-query/weightInformation';

    export default {
        name: "pre-vehicle-weight",
        components: {
            WeightInformation
        },
        data() {
            return {
                wjaType: '',
                wja: '',
                step1: 'fs',
                wjaTableData: [],
                wjaVisible: false,
                limitInfo: {},
                wsEvent: '',
                zfws: false,
                currentProcessId: '',
                showTab: {
                    overrunActionProof: true,
                    overrunVehicleNotification: true
                    /* InquiryRecord: true,
                        SurveyReportCompany: true,
                        placedCaseTableCompany: true,
                        IllegalActNoticeCompany: true,
                        serviceReturnReceiptCompanyIAN: true,
                        OnSitePunishment: true,
                        OrderCorrectionNoticeCompany: true,
                        closeReportCompany: true,
                        CoverCompany: true,*/
                },

                firstIllegalType: {
                    zdhp: false, /* 压线、套牌、假牌、遮挡号牌*/
                    jp: false,
                    tp: false,
                    yx: false
                },
                InquiryResults: [],
                tableSize: 0,
                totalSize: 0,
                index: 0,
                detailData: {},
                detailData1: {},
                crossing_arr: [],
                queryParams: {
                    plateNo: '',
                    // Vehicle_weight: '',
                    // Vehicle_weight1: '',
                    // Over_rate: '',
                    // Over_rate1: '',
                    // Axle_num: '',
                    startGmtEntry: '', // moment().format('YYYY-MM-DD') + ' 00:00:00',
                    endGmtEntry: '', // moment().add(1, 'day').format('YYYY-MM-DD') + ' 00:00:00',
                    CurrentPage: 1
                },
                isLoading: false,
                tableData: [],
                totalCount: 0,
                plateColor: [],
                timer: ''
            };
        },
        created() {

        },
        mounted() {
            this.getList();
            // this.$store.dispatch('sysdict/getDict', 'plate_color').then(res => {
            //     console.log('res');
            //     console.log(res);
            //     this.plateColor = res;
            // }).catch(() => {
            // });
        },
        methods: {
            handleWjaViews(i) {
                this.tableData[0].plate_no = "test";
            },

            tableRowClassName({row, rowIndex}) {
                if (((this.$refs['weight-information'] && this.$refs['weight-information'].outerVisible || this.zfws) && row == this.detailData)) {
                    return 'selected-row';
                }
                return '';
            },
            showZfws(i) {
                this.index = i;
                console.log("查看index");
                console.log(this.index);
                // this.detailData = {};
                this.detailData = this.tableData[i];
                this.detailData1 = this.tableData[i];
                console.log("查看");
                console.log(this.detailData);
                this.$refs['weight-information'].show();
            },
            // showZfws(row) {
            //     // this.detailData = {};
            //     this.detailData = row;
            //     this.detailData1 = row;
            //     console.log("查看");
            //     console.log(this.detailData);
            //
            //     this.$refs['weight-information'].show();
            //
            // },
            handleViews(i) {
                this.index = i;
                this.detailData.plateNo = this.tableData[i].plate_no;
                this.detailData1.plateNo = this.tableData1[i].plate_no;

                this.$refs['weight-information'].show();
            },
            moment,
            handleQuery() {
                this.getList();
            },
            resetQuery() {
                this.queryParams.plateNo = '';
                this.queryParams.startGmtEntry = '';
                this.queryParams.endGmtEntry = '';
                this.queryParams.CurrentPage = 1;
                this.getList();
            },
            handleCurrentChange(val) {
                this.queryParams.CurrentPage = val;
                this.getList();
            },
            getList() {
                // this.tableData[0].plate_no = "123"
                // this.isLoading = true;
                // this.queryParams.Crossing_id = this.crossing_arr.join(',');
                // if (!this.queryParams.Pass_time1) {
                //     this.queryParams.Pass_time1 = '';
                // }
                // if (!this.queryParams.Pass_time2) {
                //     this.queryParams.Pass_time2 = '';
                // }
                GetVehicleDetect(this.queryParams).then(res => {
                    this.isLoading = false;
                    this.tableData = res.res.GetVehicleDetect;
                    this.tableSize = this.tableData.length;
                    if (this.tableData && this.tableData.length > 0) {
                        this.totalCount = this.tableData[0].totalCount;
                        this.totalSize = this.tableData[0].totalCount;
                        // console.log(this.totalCount);
                    } else {
                        this.totalCount = 0;
                        this.totalSize = 0;
                    }
                    // if (this.plate_color != null && this.plate_color != undefined) {
                    // this.tableData.forEach(x => {
                    //     x.plate_color_name = this.plate_color.find(item => { return item.sysdict_code == x.plate_color; }).sysdict_name;
                    //     // x.plate_color_name = this.plate_color_name;
                    // console.log('plate_color');
                    // console.log(this.plate_color);
                    // });
                    // }
                }).catch(err => {
                    this.isLoading = false;
                    console.log(err);
                });
            }
        }
    };
</script>

<style scoped>
    .table-header {
        background-color: #f8f8f8 !important;
    }
    /deep/
    .el-table td {
        padding: 5px 0 !important;
    }
    /deep/
    .el-button--text {
        padding: 7px 0;
    }
</style>


